<template>
	<view>
			<view class="openCenter">
				<view class="openTitle">
					会员尊享权益
				</view>
				
				<view class="memberExclusive">
					<view v-for="(item,index) in exclusiveList" :key="index" class="item">
						<view class="itemLeft">
							<view class="itemLeftImg">
								<image src="/static/images/douyin.png"></image>
								<!-- <image v-if="item.platform == 'douyin'" src="/static/images/douyin.png"></image> -->
								<!-- <image v-if="item.platform == 'kuaishou'" src="/static/images/kuaishou.png"></image> -->
								<!-- <image v-if="item.platform == 'xiaohongshu'" src="/static/images/xiaohongshu.png"></image> -->
							</view>
							<view class="">
								<view style="color: #F95150;">
									价值{{ item.market_price }}元的福利套餐
								</view>
								<view class="">
									{{ item.combination_name }}个
								</view>
							</view>
						</view>
						<view @click="selectExclusive(item)" class="itemRight">
							<image v-if="item.checked" src="/static/images/is-circle.png"></image>
							<image v-else src="/static/images/circle.png"></image>
						</view>
					</view>
				</view>
				
				<view @click="memberToPay" class="surePay">
					确定支付
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		props:{
			showBack: {
				default: '',
			}
		},
		data() {
			return {
				exclusiveList: [], // 福利数据
				payStatus:false,
				welfareId: '', // 选中福利Id
				price:298 // 会员价格
			};
		},
		created() {
			if(this.showBack == 2) {
				this.price = 598
				this.welfareId = 4
			}else {
				this.price = 298
				this.welfareId = 5
			}
			this.getExclusiveList()
		},
		methods:{
			// 获取福利列表
			getExclusiveList() {
				this.$api.getExclusiveList(
					{
						source_id: this.showBack
					},
					res => {
						this.exclusiveList = res.data.combination;
						this.exclusiveList.forEach(welfare => {
							if (welfare.combination_id == this.welfareId) {
								welfare.checked = 1;
							}
						});
					}
				);
			},
			// 选择福利
			selectExclusive(item) {
				if (item.checked == 1) {
					item.checked = 0;
					this.welfareId = '';
				} else {
					item.checked = 1;
					this.exclusiveList.forEach(welfare => {
						if (welfare.combination_id !== item.combination_id) {
							welfare.checked = 0;
						}
					});
					this.welfareId = item.combination_id;
				}
			},
			// 会员支付
			memberToPay() {
				// #ifdef H5
				this.$common.errorToShow('请在App内支付')
				return
				const WeixinJSBridge  = this.$wechat.isWechat() // 判断是否是在微信浏览器
				this.$api.rechargeVip({
						price:this.price,
						type: 'app',
						combination_id:this.welfareId
					},res => {
						if(WeixinJSBridge) {
							this.$wechat.pay({
								appId: res.data.data.appid, // 公众号名称，由商户传入
								timeStamp: res.data.data.timeStamp, // 时间戳，自1970年以来的秒数
								nonceStr: res.data.data.nonceStr, // 随机串
								package: res.data.data.package,
								signType: res.data.data.signType, // 微信签名方式：
								paySign: res.data.data.paySign // 微信签名
							},res => {
								this.$common.successToShow('支付成功');
								this.$emit('close')
							})
						}else {
							this.$common.errorToShow('支付错误,缺少支付参数')
						}
					})
				
				// #endif
				
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				let that = this
				that.$api.rechargeVip({
					price:that.price,
					type: 'balance',
					combination_id:that.welfareId
				},res => {
					if(res.status == 200) {
						that.$common.successToShow('支付成功');
						uni.switchTab({
							url:'/pages/member/index'
						});
					}else {
						that.$common.errorToShow(res.message)
					}
					that.$common.loadToHide();
					that.payStatus = false;
				})
				return
				
				 	if(!that.welfareId) {
				    	that.$common.errorToShow('请选择赠送套餐')
				    	return
					}
					that.$common.loadToShow('正在支付'); 
					if (that.payStatus) {
						that.$common.errorToShow('请不要重复支付')
						return;
					}
					that.payStatus = true;  
					that.$api.rechargeVip({
						price:that.price,
						type: 'app',
						combination_id:that.welfareId 
					}, res => {
						if (res.status == 200) {
							// #ifdef H5
							/**
							 * 微信支付有两种
							 * 判断是否在微信浏览器
							 * 	微信jsapi支付
							 */
							// let isWeiXin = this.$common.isWeiXinBrowser()
							// let jsConfig = res.data.data;
							// if (res.data.result === undefined) return that.$util.Tips({
							// 	title: '缺少支付参数'
							// });
							// uni.requestPayment({
							// 	timeStamp: jsConfig.timestamp,
							// 	nonceStr: jsConfig.nonceStr,
							// 	package: jsConfig.package,
							// 	signType: jsConfig.signType,
							// 	paySign: jsConfig.paySign,
							// 	success: function(res) {
							// 		that.$common.successToShow('支付成功');
							// 		that.$emit('close')
							// 	},
							// 	fail: function(e) {
							// 		return that.$util.Tips({
							// 			title: '取消支付'
							// 		});
							// 	},
							// 	complete: function(e) {
							// 		if (e.errMsg == 'requestPayment:cancel') return that.$util.Tips({
							// 			title: '取消支付'
							// 		});
							// 	},
							// });
							// #endif
							
							// #ifdef MP-WEIXIN
							// uni.requestPayment({
							// 	provider: 'wxpay',
							// 	timeStamp: res.data.data.timeStamp,
							// 	nonceStr: res.data.data.nonceStr,
							// 	package: res.data.data.package,
							// 	signType: res.data.data.signType,
							// 	paySign: res.data.data.paySign,
							// 	success: function(data) {
							// 		that.$common.successToShow('支付成功');
							// 		that.$emit('close')
							// 	},
							// 	fail: function(err) {}
							// });
							// #endif
							
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									appid: res.data.data.appid,
									noncestr: res.data.data.noncestr,
									package: res.data.data.package,
									partnerid: res.data.data.partnerid,
									prepayid: res.data.data.prepayid,
									timestamp: res.data.data.timestamp,
									sign: res.data.data.sign
								},
								success: function(data) {
									that.$common.successToShow('支付成功');
									that.$emit('close')
								},
								fail: function(err) {}
							});
						} else {
							that.$common.errorToShow('支付失败')
						}
						that.$common.loadToHide();
						that.payStatus = false;
					});
					// #endif
			}
		}
	}
</script>

<style lang="less">
	.openCenter {
		box-sizing: border-box;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #FFFFFF;
		z-index: 9999;
		padding-bottom: 20rpx;
		.openTitle {
			padding: 20rpx 0;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #804B02;
			text-align: center;
		}
		
			.memberExclusive {
				overflow: hidden;
				padding: 0 20rpx;
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #ececec;
					padding-bottom: 20rpx;
					margin-bottom: 20rpx;
					.itemLeft {
						display: flex;
						flex: 1;
						.itemLeftImg {
							width: 79rpx;
							height: 79rpx;
							margin-right: 20rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
					.itemRight {
						width: 45rpx;
						height: 45rpx;
						border-radius: 50%;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
				}
				.item:last-child {
					border-bottom: none;
				}
			}
		
		.surePay {
			width: 600rpx;
			height: 76rpx;
			text-align: center;
			line-height: 76rpx;
			margin: 0 auto;
			background-color: #FF6D00;
			border-radius: 76rpx;
			color: #FFFFFF;
		}
	}

</style>
